<template>
  <div
    ref="checkboxHoverContainer"
    class="flex w-full heading-s-medium rounded-xl hover:bg-c-grey-xs hover:text-c-grey-3xl"
    :class="[{ 'text-c-grey-2xl': !checked }, { 'text-c-grey-3xl': checked }]"
  >
    <input
      :id="label"
      class="z-[-1] opacity-0 absolute"
      type="checkbox"
      :name="name"
      :checked="checked"
      :value="value"
      @input="handleInput"
    />
    <label
      :for="label"
      class="w-full flex flex-nowrap items-center gap-2 cursor-pointer select-none py-3 px-3"
    >
      <SvgoCheckboxIconUncheckedDefault
        v-if="!checked && !isHovered"
        class="flex-shrink-0"
        filled
      />
      <SvgoCheckboxIconUncheckedHover
        v-else-if="!checked && isHovered"
        class="flex-shrink-0"
        filled
      />
      <SvgoCheckboxIconChecked v-else class="flex-shrink-0" filled />
      {{ label }}</label
    >
  </div>
</template>

<script setup lang="ts">
interface Props {
  checked: boolean
  value: string
  name: string
  label: string
  group?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  checked: false,
  value: '',
  name: '',
  label: 'Label',
  group: false
})
const { checked, value, name, label, group } = toRefs(props)
const emits = defineEmits(['update:checked', 'updateCheckedGroup'])

const handleInput = (e: Event) => {
  if (!group.value) {
    emits('update:checked', (e.target as HTMLInputElement).checked)
  } else {
    emits('updateCheckedGroup', {
      value: value.value,
      checked: (e.target as HTMLInputElement).checked
    })
  }
}
const checkboxHoverContainer = ref()
const isHovered = useElementHover(checkboxHoverContainer)
</script>

<style scoped lang="scss">
$component: '.Checkbox';
</style>
